<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>首页</title>
	<base href="../../../" />
	<script src="lib/function/responsive.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="static/css/api.css" />
	<style>
		body {
			padding-top: 1.5rem;
			height: 100%;
		}

		#header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			z-index: 99;
			box-shadow: 0 0 10px 3px rgba(205, 205, 205, 0.45);
			/* box-shadow: 0rem 0rem 0.17rem 0.04rem
				rgba(205, 205, 205, 0.45); */
		}

		#header .header-box {
			display: flex;
			justify-content: space-between;
			height: 1.06rem;
		}

		#header .return {
			width: 1.7rem;
			height: 1.06rem;
			line-height: 1.06rem;
			box-sizing: border-box;
			padding-left: 0.65rem;
			font-size: 0.22rem;
			color: #333333;
			white-space: nowrap;
			/* background: url(static/icon/back.png) no-repeat left 0.3rem center; */
			background-size: 0.18rem;
			font-size: 0.26rem;
		}

		#header .return span {
			color: #757575;
			font-size: 0.26rem;
		}

		#header .return:active,
		#header .home:active {
			opacity: 0.6;
		}

		#header .name {
			line-height: 1.06rem;
			font-size: 0.28rem;
			font-weight: bold;
			color: #333333;
		}

		#header .home {
			width: 1.7rem;
			height: 1.06rem;
			/* background: url(static/icon/home.png) no-repeat right 0.3rem center;
				background-size: 0.44rem; */
			text-align: right;
			padding-right: 0.3rem;
		}

		#header .home span {
			display: inline-block;
			min-width: 1.01rem;
			height: 0.48rem;
			line-height: 0.48rem;
			margin-top: 0.26rem;
			font-size: 0.18rem;
			color: #757575;
			background: url(static/icon/exit.png) no-repeat left 0.2rem center;
			background-size: 0.18rem;
			background-color: #efefef;
			border-radius: 0.1rem;
			padding-left: 0.48rem;
			padding-right: 0.2rem;
			white-space: nowrap;
			box-sizing: border-box;
		}

		.index {
			overflow: hidden;
			padding: 0 0.3rem 0.3rem;
		}

		.index .title {
			font-family: MicrosoftYaHei;
			font-size: 0.23rem;
			font-weight: bold;
			color: #333333;
			padding-left: 0.27rem;
			line-height: 0.8rem;
			position: relative;
		}

		.index .more-btn {
			line-height: 0.8rem;
			float: right;
			min-width: 0.8rem;
			text-align: right;
			color: #686868 !important;
			font-size: 0.22rem;
		}

		.index .more-btn:active {
			opacity: 0.8;
		}

		.index .title::before {
			position: absolute;
			content: '';
			top: 0.28rem;
			left: 0;
			width: 0.06rem;
			height: 0.25rem;
			background-color: #2691ff;
			border-radius: 0.03rem;
		}

		.index-left {
			float: left;
			width: 14.4rem;
		}

		.index-left .index-video {
			width: 14.4rem;
			height: 8.28rem;
			background-color: #000000;
		}

		.index-left .index-video video {
			width: 100%;
			height: 100%;
		}

		.index-left .nav-tab {
			width: 14.41rem;
			height: 0.8rem;
			background-color: rgba(38, 145, 255, 0.07);
		}

		.index-left .nav-tab li {
			float: left;
			font-size: 0.2rem;
			line-height: 0.8rem;
			padding: 0 0.4rem;
			margin-right: 0.1rem;
			color: #262626;
		}

		.index-left .nav-tab .active {
			color: #2691ff;
			position: relative;
		}

		.index-left .nav-tab .active::after {
			content: '';
			position: absolute;
			width: 0.62rem;
			height: 0.04rem;
			background-color: #2691ff;
			left: 50%;
			margin-left: -0.31rem;
			bottom: 0.1rem;
		}

		.index-left .box-con {
			padding: 0.3rem 0 0;
			height: 5.1rem;
			overflow-y: auto;
			margin-bottom: 0.2rem;
		}

		.index-left .box-lis {
			margin-bottom: 0.23rem;
			padding-left: 1.6rem;
			position: relative;
			line-height: 0.3rem;
			font-size: 0.2rem;
		}

		.index-left .box-lis:last-child {
			margin-bottom: 0;
		}

		.index-left .box-lis .name {
			width: 1.6rem;
			left: 0;
			position: absolute;
			color: #2691ff;
			text-align: right;
		}

		.index-left .box-lis .text {
			color: #686868;
		}

		/* 右侧 */
		.index-right {
			float: right;
			width: 4rem;
			margin-top: 0.1rem;
		}

		.index-right .section {
			width: 4rem;
			min-height: 6.66rem;
			margin-bottom: 0.3rem;
			background-color: #f6f6f6;
			padding: 0 0.25rem;
			box-sizing: border-box;
		}

		.index-right .section ul {
			padding-left: 0.5rem;
		}

		.index-right .section li {
			line-height: 0.8rem;
			font-size: 0.18rem;
			color: #262626;
			position: relative;
			display: flex;
			justify-content: space-between;
			position: relative;
			align-items: center;
		}

		.index-right .section li::before {
			position: absolute;
			content: '';
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background-color: #8cc34c;
			left: -10px;
			top: 50%;
			margin-top: -3px;
		}

		.index-right .section li i {
			display: inline-block;
			background-color: #8cc34c;
			border-radius: 0.04rem;
			font-size: 0.15rem;
			height: 0.3rem;
			line-height: 0.3rem;
			padding: 0 0.1rem;
			color: #ffffff;
			vertical-align: middle;

		}

		.index-right .status1 i {}

		.index-right .status1 {}

		.index-right .section .status2 i {
			background-color: #fb6f3d;
		}

		.index-right .section .status2::before {
			background-color: #fb6f3d;
		}

		.index-right .section .status3::before {
			background-color: #27e0fb;
		}

		.index-right .section .status3 i {
			background-color: #27e0fb;
		}

		.index-right .history:active {
			opacity: 0.6;
		}

		.index-right .history {
			width: 2.01rem;
			height: 0.58rem;
			background-color: #2691ff;
			box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem rgba(57, 141, 227, 0.52);
			border-radius: 0.1rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0.2rem auto 0.3rem;
			font-size: 0.18rem;
			color: #ffffff;
		}

		.index-right .name {
			padding: 0.58rem 0.2rem;
		}

		.index-right .name img {
			display: inline-block;
			width: 1rem;
			height: 1rem;
			background-color: #2691ff;
			border-radius: 50%;
			vertical-align: middle;
		}

		.index-right .name .txt {
			display: inline-block;
			vertical-align: middle;
			margin-left: 0.2rem;

		}

		.index-right .name .name {
			padding: 0;
			margin: 0 0 0.18rem 0;
			font-size: 0.22rem;
			color: #101010;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			max-width: 1.8rem;
		}

		.index-right .name .tel {
			font-size: 0.2rem;
			color: #9d9d9d;
		}

		.index-right .test {
			text-align: center;
			padding-top: 0.6rem;
			font-size: 0.2rem;
			color: #9d9d9d;
			position: relative;
		}

		.index-right .test::before {
			position: absolute;
			content: '';
			left: 0rem;
			right: 0rem;
			top: 0;
			height: 1px;
			border-top: 1px dashed #9d9d9d;
		}

		.index-right .test span {
			color: #131313;
		}

		/* 弹窗 */
		.index-tc,
		.equipment,
		.meeting {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 99;
		}

		.index-tc-box,
		.equipment-box,
		.meeting-box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.meeting-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 1.4rem;
			height: 0.48rem;
			background-color: #2691ff;
			color: #fff;
			margin: 0 auto;
			font-size: 0.18rem;
			border-radius: 0.1rem;
		}
		.index-tc .index-con {
			width: 4.39rem;
			height: 3.4rem;
			background-color: #ffffff;
			border-radius: 0.1rem;
		}

		.index-tc .txt {
			text-align: center;
			padding-top: 1.57rem;
			background: url(static/icon/warning.png) no-repeat top 0.45rem center;
			background-size: 0.98rem;
			font-size: 0.26rem;
			color: #101010;
		}

		.index-tc .index-btn {
			display: flex;
			justify-content: space-between;
			padding: 0.5rem 0.8rem 0;
		}

		.index-tc .index-btn span {
			display: inline-block;
			width: 1.15rem;
			height: 0.58rem;
			background-color: #2691ff;
			box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem rgba(57, 141, 227, 0.52);
			border-radius: 0.1rem;
			text-align: center;
			line-height: 0.58rem;
			font-size: 0.18rem;
			color: #ffffff;
		}

		.index-tc .index-btn span:active {
			opacity: 0.6;
		}

		.index-tc .index-btn .close {
			background-image: linear-gradient(#dcdcdc,
					#dcdcdc),
				linear-gradient(#2691ff,
					#2691ff);
			background-blend-mode: normal,
				normal;
			box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem rgba(191, 191, 191, 0.52);
			color: #929292;
		}

		/* 获取设备列表弹窗 */
		.equipment-con,
		.meeting-con {
			width: 6rem;
			height: 5rem;
			background-color: #ffffff;
			border-radius: 0.1rem;
			position: relative;
		}
		.meeting-con {
			height: 2.8rem;
		}
		.meeting-input{
			height: 1.2rem;
			display: flex;
			justify-items: center;
			align-items: center;
			padding: 0 0.5rem 0.5rem;
		}
		.close-equipment,
		.close-meeting {
			position: absolute;
			right: 0;
			top: 0;
			background-color: #00AA00;
			width: 0.8rem;
			height: 0.8rem;
			background: url(static/icon/close.png) no-repeat center;
			background-size: 0.3rem;
			z-index: 999999;
		}

		.equipment-top,
		.meeting-top {
			text-align: center;
			font-size: 0.3rem;
			line-height: 0.8rem;
			position: relative;
		}

		.equipment-lis-box,
		.meeting-lis-box {
			height: 3.4rem;
			overflow-y: auto;
		}

		.equipment-lis-box .equipment-lis,
		.meeting-lis-box .meeting-lis {
			padding: 0.2rem;
			position: relative;
		}

		.equipment-lis-box .equipment-lis::after,
		.equipment-top::after {
			content: '';
			height: 1px;
			width: 100%;
			background-color: #ccc;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			transform: scale(1, 0.5);
		}

		/* .equipment-lis-box .equipment-lis:last-child::after{
				height: 0;
			} */
		.reset-btn {
			text-align: center;
		}

		.reset-btn span {
			display: inline-block;
			padding: 0.12rem 0.3rem;
			background-color: #2691ff;
			border-radius: 0.1rem;
			margin-top: 0.1rem;
			color: #fff;
		}

		.equipment-load {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			left: 0;
			display: none;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.1);
			z-index: 9999;
		}

		.equipment-load img {
			width: 1.2rem;
		}

		.equipment-load-show .equipment-load {
			display: flex;
		}

		.equipment-load-show .reset-btn {
			display: none;
		}
	</style>
</head>

<body>
	<div id="header">
		<div class="header-box">
			<div i18n="equipment" class="return device">设备：<span>请选择</span></div>
			<div i18n="home.page" class="name">首页</div>
			<div class="home exitBtn">
				<span i18n="sign.out">退出</span>
			</div>
		</div>
	</div>
	<div class="index">
		<div class="index-left">
			<div class="title" i18n="assessment.criteria">考核标准</div>
			<div class="nav-tab">
				<ul id="nav-box">
					<!-- <li class="active">镜下识别</li>
						<li>夹持训练</li>
						<li>定位摆放</li>
						<li>穿钍引线</li>
						<li>剪切训练</li> -->
				</ul>
			</div>
			<div class="box-con">
				<!-- <div class="box-lis">
						<div class="name">考官指令：</div>
						<div class="text">请您首先仔细阅读第1题的试题卡，按要求完成考试。考前准备时间为2分钟，正式考试时间为1 分钟， 请注意合理分配时间。</div>
					</div>
					<div class="box-lis">
						<div class="name">综合评价：</div>
						<div class="text">根据考生完成全部所需时间和完成技术要求综合评定，总分为100分。</div>
					</div>
					<div class="box-lis">
						<div class="name">操作时间评价：</div>
						<div class="text">根据考生完成全部操作所需时间进行评分：≤30秒（15分）；31~40秒（12分）；41~50秒（8分）；51~60秒（5分）； >60秒（0分）</div>
					</div>
					<div class="box-lis">
						<div class="name">操作质量评价：</div>
						<div class="text"><p>1.正确选择操作器械（应当选择手持φ10mm腹腔镜×1，φ5mm抓钳×1）</p>
						<p>2.腔体内设1个起始键，和由A~E共5个标记点，点击起始键后开始计时，识别标记点并通过检测后自动结束</p>
						<p>3.双手配合操作，一手持腹腔镜，另一手持抓钳，首先使用腹腔镜引导找到起始点，同时使用抓钳钳头触碰起始点计时开始，然后腹腔镜引导找到标记点，同时使用</p>
						<p>抓钳钳头触碰标记点，检测通过后为完成1次识别，按顺序由A至E，完成识别通过后自动结束核算分数</p></div>
					</div> -->
			</div>
			<div class="title">
				<span i18n="teaching.video">教学视频</span>
				<div i18n="more" class="more-btn openPage" data-url="index_videolist" data-index="1">更多&gt;&gt;</div>
			</div>
			<div class="index-video">

			</div>
		</div>
		<div class="index-right">
			<div class="section">
				<div class="name" id="user">
					<!-- <img src="static/images/img1.jpg" alt="">
						<div class="txt">
							<div class="name">张三</div>
							<div class="tel">18780038687</div>
						</div> -->
				</div>
				<div class="test">
					<!-- 考试科目: <span> 镜下识别</span> -->
				</div>
				<div i18n="go.exam" class="history openPage" data-url="index_test" data-index="3" data-type="test">去考试
				</div>
				<div i18n="to.train" class="history openPage" data-url="index_test" data-index="3" data-type="train">去训练
				</div>
				<div class="history openPage" i18n="distance.teaching" data-url="public_web" data-index="2" data-type="fastJoinMeeting">远程教学</div>
				<div class="history openPage" i18n="join.meeting" data-url="joinMeeting" data-index="2" data-type="joinMeeting">加入会议</div>
			</div>
			<div class="section">
				<div i18n="latest.exam" class="title">最新考试</div>
				<ul id="test-box">
					<!-- <li class="status1">
							<span>镜下识别</span>
							<i>已通过</i>
						</li> -->
				</ul>
				<div i18n="view.historical.results" class="history openPage" data-url="index_history" data-index="2">
					查看历史成绩</div>
			</div>
		</div>
		<!-- 退出弹窗 -->
		<div class="index-tc hidden">
			<div class="index-tc-box">
				<div class="index-con">
					<div i18n="sure.exit" class="txt">是否确认要退出！</div>
					<div class="index-btn">
						<span i18n="confirm" class="ok" id="exitBtn">确认</span>
						<span i18n="cancel" class="close">取消</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 设备选择 -->
	<div class="equipment hidden">
		<div class="equipment-box">
			<div class="equipment-con">
				<div class="close-equipment"></div>
				<div i18n="please.select.equipment" class="equipment-top">请选择设备</div>
				<div class="equipment-lis-box">
					<!-- <div class="equipment-lis">设备1</div>
						<div class="equipment-lis">设备2</div>
						<div class="equipment-lis">设备3</div>
						<div class="equipment-lis">设备3</div>
						<div class="equipment-lis">设备3</div>
						<div class="equipment-lis">设备3</div> -->
				</div>
				<div i18n="search.again" class="reset-btn"><span>重新搜索</span></div>
				<!-- 搜索动画 -->
				<div class="equipment-load">
					<img src="static/icon/loading_more.gif">
				</div>
			</div>
		</div>
	</div>
	<!-- 远程教学弹窗 -->
	<div class="meeting hidden">
		<div class="meeting-box">
			<div class="meeting-con">
				<div class="close-meeting"></div>
				<div i18n="distance.teaching" class="meeting-top">远程教学</div>
				<div class="meeting-input">
					<!-- 301431417 -->
					<input type="text" i18n="placeholder.meeting.number" i18n-only="placeholder" class="serial"
						name="serial" value="" placeholder="请输入会议号/邀请码" maxlength="20" />
				</div>
				<div i18n="next.step" class="meeting-btn"><span>下一步</span></div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="runtime/pub.js"></script>
	<script src="dist/i18n.js"></script>
	<script type="text/javascript" src="runtime/index/main.js"></script>
	<!-- <script src="dist/vconsole.min.js"></script> -->
	<!-- <script>
			new VConsole()
		</script> -->
</body>

</html>